<template>
  <div v-if = this.show>
      <!-- 收藏夹歌曲列表弹窗 -->
      <van-popup v-model="popupShow" round closeable lock-scroll=false  position="bottom" :style="{ height: '50%' } " >
        <CollectMusicList :ItCollectId="this.collectId"></CollectMusicList>
      </van-popup>


      <van-row>
        <van-col span="19">
          <van-cell-group inset>
            <van-cell @click="openIt()">
          <!-- <h1>播放列表</h1> -->
            <van-row>
              <van-col span="2"></van-col>
              <van-col span="17">
                <div style="display:flex; align-items: center; justify-content: flex-start;">
                  <h4> {{this.collectName}}</h4>
                </div>
              </van-col>
              <van-col span="5">
                <div style="display:flex; align-items: center; justify-content: flex-start;">
                <p class="num">{{this.countMusic}}首</p>         
                </div> 
              </van-col>
            </van-row>
          </van-cell>
          </van-cell-group>
        </van-col>

        <van-col span="5">
                <!--删除按钮 -->
            <div style="display:flex; align-items: center; justify-content: flex-start;">
            <van-dialog v-model="dialogshow" :title="this.deleteTitle" @confirm="deleteIt()"  show-cancel-button>

            </van-dialog>
            <van-button   round  icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E5%88%A0%E9%99%A4%20%282%29.png" @click="showDialog()"> 删除</van-button>
            <!-- <van-icon size="1.5rem" name="http://rul4y8e5f.hn-bkt.clouddn.com/%E5%88%A0%E9%99%A4%20%282%29.png"></van-icon> -->
          </div>
        </van-col>
      </van-row>

   
  </div>
</template>

<script>
import CollectAPI from '@/api/CollectAPI';
import { Dialog } from 'vant';
// import page2CollectmusicList from '@/views/User/collect/page2CollectmusicList.vue';
import page2CollectmusicList from '@/views/User/collect/page2CollectmusicList.vue';
import CollectMusicList from './CollectMusicList.vue';
export default {
  components: { page2CollectmusicList,
    CollectMusicList ,
    [Dialog.Component.name]: Dialog.Component,
  },
   name: "CollectPage2List",
   comments: {
    
   },
  //  inject: ['reload'],
   data() {
    return {
      countMusic: "",
      dialogshow: false,
      deleteTitle: "",
      popupShow: false,
      show: true
    }
   },
   created() {
    this.deleteTitle="是否删除收藏夹《"+this.collectName+"》？"
     this.getCount()
       
   },
   methods: {
    // 获取收藏夹的总数
    getCount(){
      var result = CollectAPI.CountMusic2Collect(this.collectId)
        // 获取返回结果
       result.then((val) => {
        if (val.success) {
          this.countMusic=val.data
        }
        else {
         console.log(val.errorMsg);
         this.$toast(val.errorMsg);
             }
      });
    },
    // 查看收藏夹
    openIt(){
    this.popupShow=true
    },
    showDialog(){
      // this.popupShow=false;
      this.dialogshow=true;
    },
    deleteIt(){
      var result = CollectAPI.deleteCollect(this.collectId);
        // 获取返回结果
       result.then((val) => {
        console.log(val);
        if (val.success) {
          this.$toast("成功删除: 收藏夹 《"+this.collectName +"》")
            //  this.$router.go(0)
          this.show=false
        }
        else {
         console.log(val.errorMsg);
         this.$toast(val.errorMsg);
             }
      });

    }
   },
   props: {
    collectId: {
      required: true,
      type: String
    },
    userId: {
      required: true,
      type: String
    },
    collectName: {
      required: true,
      type: String
    },
   }
}
</script>

<style scoped>
.num{
  color: #12a2ce;
}
</style>